/*
 * @Author: hongbin
 * @Date: 2021-11-10 20:44:24
 * @LastEditors: hongbin
 * @LastEditTime: 2021-11-13 12:17:12
 * @Description: 左侧切换数据库
 */
import { FC, ReactElement, useState, useEffect } from "react";
import { DbInfo } from "../../api/types";
import styled, { css } from "styled-components";
import {
  List,
  ListItem,
  ListItemButton,
  ListItemText,
  Dialog as MDialog,
  DialogContent,
  Button,
  Typography,
} from "@mui/material";
import {
  flexCenter,
  ThemePrimaryBgc,
  ThemeText,
  textEllipsis,
} from "../styled";
import { LoadingButton } from "@mui/lab";
import { CheckRounded } from "@mui/icons-material";
import ElongateLine from "../ElongateLine";

const Dialog = styled(MDialog)`
  button {
    width: 40%;
    margin-left: 5%;
  }
`;

interface IProps {
  dbInfo: DbInfo;
  selectedDatabase: (name: string) => void;
  newDbLoad: number;
}

const DatabaseSide: FC<IProps> = ({
  dbInfo: { dbs, databaseName },
  selectedDatabase,
  newDbLoad,
}): ReactElement => {
  const [toggleDb, setToggleDb] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (newDbLoad) {
      setToggleDb("");
      setLoading(false);
    }
  }, [newDbLoad]);

  if (!dbs) return <SideContainer></SideContainer>;

  const renderItem = ({ name, sizeOnDisk }: typeof dbs.databases[number]) => (
    <ListItem key={name}>
      <ListItemButton
        onClick={() => {
          if (databaseName === "test") {
            selectedDatabase(name);
          } else setToggleDb(name);
        }}
        selected={databaseName === name}
      >
        <ListItemText
          primary={name}
          secondary={Math.round(sizeOnDisk / 1024) + "kb"}
        />
      </ListItemButton>
    </ListItem>
  );

  return (
    <SideContainer
      data-size={`总内存-${(dbs.totalSize / 1024 / 1024).toFixed(3)}MB`}
    >
      <List>{dbs.databases.map(renderItem)}</List>
      <Dialog open={!!toggleDb}>
        <DialogContent>
          <Typography>确定切换数据库 这会断开当前数据库连接</Typography>
          <Typography variant="caption">当前连接- {databaseName}</Typography>
          <br />
          <br />
          <Button
            disabled={loading}
            variant="outlined"
            onClick={() => setToggleDb("")}
          >
            取消
          </Button>
          <LoadingButton
            loading={loading}
            loadingPosition="start"
            startIcon={<CheckRounded />}
            variant="contained"
            onClick={() => {
              selectedDatabase(toggleDb);
              setLoading(true);
            }}
          >
            确定
          </LoadingButton>
        </DialogContent>
      </Dialog>
      <ElongateLine />
    </SideContainer>
  );
};

export default DatabaseSide;

export const rightLine = css`
  &::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 92%;
    top: 3%;
    right: 0;
    background-color: ${props => props.theme.palette.primary.light};
    border-radius: 1px;
    box-shadow: ${props => props.theme.shadows[10]};
  }
`;

const beforeText = css`
  &::before {
    content: attr(data-size);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: ${props => props.theme.palette.background.default};
    font-size: 0.8rem;
    height: 2rem;
    ${flexCenter};
    ${ThemePrimaryBgc};
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    ${textEllipsis};
  }
`;

export const SideContainer = styled.div<{ hideBefore?: boolean }>`
  width: 10rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 2rem;
  ${ThemeText};

  & > ul {
    overflow: scroll;
    width: 100%;
    user-select: none;
    cursor: inherit;
  }

  ${props => (props.hideBefore ? undefined : beforeText)};
  ${rightLine};
`;
